<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">我的会员</block>
		</cu-custom>
		<view>
			<view v-if="vips.length == 0" class="flex flex-direction padding margin bg-white">
				<text class="text-center">暂无数据</text>
			</view>
			<view v-for="(vip,index) in vips" :key="index" 
				class="flex flex-direction padding margin bg-white">
				<view class="flex justify-between margin-tb-sm">
					<text class="flex align-start">
						<text class="cuIcon-pullup margin-right-sm"></text>
						<text v-if="null == vip.st">未设置</text>
						<text v-else>{{vip.st}}</text>
					</text>
					<text class="cu-tag text-white bg-grey round" v-if="vip.statu == 0">未使用</text>
					<text class="cu-tag text-white bg-blue round" v-else-if="vip.statu == 1">已使用</text>
					<text class="cu-tag text-white bg-yellow round" v-else-if="vip.statu == 2">已过期</text>
				</view>
				<view class="flex justify-between margin-tb-sm">
					<text class="flex align-start">
						<text class="cuIcon-pulldown margin-right-sm"></text>
						<text v-if="null == vip.et">未设置</text>
						<text v-else>{{vip.et}}</text>
					</text>
					<text v-if="vip.vipType === 'C'" 
						class="text-purple cuIcon-vip">会员卡</text>
					<text v-if="vip.vipType === 'V'"
						class="text-green cuIcon-vipcard">会员券</text>
				</view>
				<view v-if="vip.originalCode" class=" margin-top">
					<text>付款单号：</text>
					<text>{{vip.originalCode}}</text>
				</view>
			</view>
			
			<view v-if="hasData" class="flex flex-direction padding margin bg-white">
				<text @tap="loadMore" class="text-center cuIcon-unfold">显示更多</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			hasData: function() {
				return this.current < this.pages;
			}
		},
		onLoad:function(){
			this.state = this.common.getState();
			this.init();
		},
		data: function() {
			return {
				state: {},
				current: 1,
				size: 10,
				pages: 0,
				vips: []
			};
		},
		methods: {
			init: function() {
				this.current = 1;
				this.size = 3;
				this.search();
			},
			search: function() {
				console.log();
				let self = this;
				this.http.get({
					url: "/client/vip/page",
					param: {
						current: self.current,
						size: self.size,
						clientId: self.state.autor.client.clientId
					}
				}).then(function(res) {
					console.log(res);
					
					for (let index in res.records) {
						self.vips.push(res.records[index]);
					}

					self.pages = res.pages;
				});
			},
			loadMore: function() {
				this.current = this.current + 1;
				this.search();
			}
		}
	}
</script>

<style>
</style>
